<template>
<div class="page-appBuyPView">
  <div class="app-preview-top">
    <div class="app-preview-title">基本信息</div>
    <ul>
      <li>
        <div><i class="icon maliiconfont maliicon-img_details_allocati"></i> 仓库</div>
        <p>{{form.storageName}}</p>
      </li>
      <li class="li-border">
        <div><i class="icon maliiconfont maliicon-img_detailse_refund"></i> 交易对象</div>
        <p>{{form.buyerName}}</p>
      </li>
      <li>
        <div><i class="icon maliiconfont maliicon-img_details_calendar"></i> 出售申请编号</div>
        <p>{{form.sellArId}}</p>
      </li>
    </ul>
  </div>
  <div class="app-preview-bottom">
    <div class="app-preview-bottom-title">
      待回购的货物
    </div>
    <el-table :data="previewData" :span-method="objectSpanMethod" border style="width: 100%;">
      <el-table-column align="center" prop="busNo" label="仓单业务号" width="160"></el-table-column>
      <el-table-column align="center" prop="goodsName" label="货物名称" width="180"></el-table-column>
      <el-table-column align="center" prop="cntrNo" label="柜号" width="160"></el-table-column>
      <el-table-column align="center" prop="vendor" label="生产厂家" width="100"></el-table-column>
      <el-table-column align="center" prop="countryOrigin" label="原产地" width="120"></el-table-column>
      <el-table-column align="center" prop="packageDesc" label="包装" width="100"></el-table-column>
      <el-table-column align="center" prop="productDate" label="生产日期" width="160"></el-table-column>
      <el-table-column align="center" prop="sellNum" label="出售数量" width="120"></el-table-column>
      <el-table-column align="center" prop="unitDesc" label="单位" width="100"></el-table-column>
      <el-table-column align="center" prop="repurchaseNum" label="回购数量" width="180" ></el-table-column>
      <!--<el-table-column prop="wsLeftNum" label="待回购数量" width="120"></el-table-column>-->
      <el-table-column align="center" prop="referWeight" label="参考回购重量（kg）" width="180"></el-table-column>
      <el-table-column align="center" fixed="right" prop="wrId" label="对应仓单" width="120">
        <template slot-scope="scope">
          <el-button type="primary" plain @click="toDetail(scope.$index, scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="app-preview-btn-box">
    <a class="ml-btn-default w140" @click="submitBuy">提交</a>
  </div>
  <pc-dialog :is-show="isBillDetail"  title ='仓单详情' @on-close="isBillDetail = false">
    <div >
      <bill-detail :id="storageId"></bill-detail>
    </div>
  </pc-dialog>
</div>
</template>
<script>
import PcDialog from 'components/dialog';
import BillDetail from 'src/views/wms/dataquery/billlist/billManagement/billDetail';
export default {
  components: {
    PcDialog, BillDetail
  },
  props: ['previewData', 'form'],
  created () {
    this.rowspan();
  },
  data () {
    return {
      isBillDetail: false,
      spanArr: [],
      position: 0,
      storageId: null
    };
  },
  methods: {
    toDetail (index, row) {
      this.storageId = row.wrId;
      this.isBillDetail = true;
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 11) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
    },
    // 合并行
    rowspan () {
      this.previewData.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1);
          this.position = 0;
        } else {
          if (this.previewData[index].wrNo === this.previewData[index - 1].wrNo) {
            this.spanArr[this.position] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.position = index;
          }
        }
      });
    },
    // 提交回购预览
    submitBuy () {
      let params = this.getPreData();
      let confirmMsg = '确定提交吗?';
      this.confirmModel(confirmMsg, '/maliwms/ar/addAr', params, (res) => {
        if (res.code === 200) {
          this.successTip('提交成功', 3000);
          this.$emit('closeRefresh');
        }
      });
    },
    // 获取提交的参数
    getPreData () {
      let params = {};
      params.arType = this.form.arType;
      params.buyerId = this.form.buyerId;
      params.sellArId = this.form.sellArId;
      params.storageId = this.form.storageId;
      params.wmsArAddGoodsDtoList = [];
      for (var i = 0; i < this.previewData.length; i++) {
        let listItem = {};
        listItem.busNo = this.previewData[i].busNo;
        listItem.goodsId = this.previewData[i].goodsId;
        listItem.sellNum = this.previewData[i].sellNum;
        listItem.repurchaseNum = this.previewData[i].repurchaseNum;
        listItem.wrId = this.previewData[i].wrId;
        params.wmsArAddGoodsDtoList.push(listItem);
      }
      return params;
    }
  }
};
</script>
<style>
.page-appBuyPView .app-preview-top{
  border:1px solid #e3e4e6;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #fff;
}
.page-appBuyPView .app-preview-top .app-preview-title{
  height: 50px;
  line-height:50px;
  color:#333333;
  text-indent: 20px;
  border-bottom:1px solid #e3e4e6;
  font-size:16px;
}
.page-appBuyPView .app-preview-top ul li{
  display: inline-block;
  width:33%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding:20px;
}
.page-appBuyPView .app-preview-top ul li.li-border{
  border-left:1px solid #e3e4e6;
  border-right:1px solid #e3e4e6;
}

.page-appBuyPView .app-preview-top ul li>div{
  color:#808080;
  font-size:14px;
}
.page-appBuyPView .app-preview-top .maliiconfont{
  color: #ff6c2b;
  font-size:16px;
}
.page-appBuyPView .app-preview-top ul li p{
  color:#333333;
  font-size:14px;
  margin-top:16px;
  margin-bottom:10px;
}
.page-appBuyPView .app-preview-bottom-title{
  height: 50px;
  line-height:50px;
  color:#333333;
  text-indent: 20px;
  border:1px solid #e3e4e6;
  font-size:16px;
  background: #fff;
  margin-bottom:-1px;
  margin-top:20px;
}
.page-appBuyPView .app-preview-btn-box{
  text-align:center;
  margin-top:40px;
}
</style>
